<%@page import="org.apache.jasper.tagplugins.jstl.core.ForEach"%>
<%@page import="com.lovestudying.entity.Teacher"%>
<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>爱学习后台管理首页</title>
		<meta name="description" content="">
		<meta name="author" content="templatemo">
		<!-- 
    Visual Admin Template
    http://www.templatemo.com/preview/templatemo_455_visual_admin
    -->
		<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,400italic,700' rel='stylesheet' type='text/css'>
		<link href="${pageContext.request.contextPath}/back/css/font-awesome.min.css" rel="stylesheet">

		<link href="${pageContext.request.contextPath}/back/css/bootstrap.min.css" rel="stylesheet">
		<!--<link rel="stylesheet" href="../WebTools/Bootstrap-4.4.1/css/bootstrap.css" />-->

		<link href="${pageContext.request.contextPath}/back/css/bootstrap-responsive.min.css" />
		<link href="${pageContext.request.contextPath}/back/css/templatemo-style.css" rel="stylesheet">

		<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
		<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
		<!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
		<style type="text/css">
			.modal {
				opacity: 1;
			}
			
			.modal * {
				opacity: 1;
			}
		</style>
	</head>

	<body>
		<!-- Left column -->
		<div class="templatemo-flex-row">
			<div class="templatemo-sidebar">
				<header class="templatemo-site-header">
					<div class="square"></div>
					<h1>爱学习后台</h1>
				</header>

				<div class="profile-photo-container">
					<img src="images/logo.jpg" alt="Profile Photo" class="img-responsive">
					<div class="profile-photo-overlay"></div>
				</div>
				<!-- Search box -->

				<div class="mobile-menu-icon">
					<i class="fa fa-bars"></i>
				</div>
				<nav class="templatemo-left-nav">
					<ul>
						<li>
							<a href="${pageContext.request.contextPath}/back/index.jsp" class="active"><i class="fa fa-home fa-fw"></i>教师管理</a>
						</li>

						<li>
							<a href="${pageContext.request.contextPath}/back/course-management.jsp"><i class="fa fa-database fa-fw"></i>课程管理</a>
						</li>
						<li>
							<a href="${pageContext.request.contextPath}/back/manage-users.jsp"><i class="fa fa-map-marker fa-fw"></i>用户管理</a>
						</li>

						<li>
							<a href="${pageContext.request.contextPath}/back/user.jsp"><i class="fa fa-sliders fa-fw"></i>注册人数查看</a>
						</li>
						<li>
							<a href="${pageContext.request.contextPath}/ManagerServlet?op=logout"><i class="fa fa-eject fa-fw"></i>退出</a>
						</li>
					</ul>
				</nav>
			</div>
			<!-- Main content -->
			<div class="templatemo-content col-1 light-gray-bg">
				<div class="templatemo-flex-row flex-content-row">

					<div class="col-1">
						<div class="panel panel-default templatemo-content-widget white-bg no-padding templatemo-overflow-hidden">

							<div class="templatemo-top-nav-container">
								<div class="row">
									<h2>欢迎：${sessionScope.managerName}</h2>
								</div>
							</div>
							<div class="table-responsive">
								<table class="table table-striped table-bordered" id="DataTables_TeacherList">
									<thead>
										<tr>
											<td class="center">教师ID</td>
											<td class="center">教师名字</td>
											<td class="center">简介</td>
											<td class="center">头像</td>
											<td class="center">授课班级</td>
											<td class="center">操作</td>
										</tr>
									</thead>
									<tbody role="alert" aria-live="polite" aria-relevant="all">

									</tbody>
									<div class="dataTables_filter" id="DataTables_Table_0_filter">
										<label>
								     <button class="btn btn-success btn-mini" onclick="search()">搜索</button>
									<button class="btn btn-info btn-mini"    onclick="clearSearch()">清除搜索</button>
								    <input type="text" aria-controls="DataTables_Table_0" id="kw" value="">
									
								</label>
									</div>
								</table>
							</div>
						</div>
					</div>
				</div>

			</div>
		</div>

		<!-- Button trigger modal -->

		<!-- 修改模态框（Modal） -->
		<div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"> &times; </button>
						<h4 class="modal-title" id="myModalLabel"> 修改教师信息 </h4>
					</div>
					<form class="form-horizontal" role="form">
						<!-- 隐藏域：标识操作类型 -->
						<input type="hidden" name="op" value="updateByTeacherId">
						<div class="modal-body">
							<div class="form-group row">
								<label for="articleId" class="col-sm-2 control-label">工号</label>
								<div class="col-sm-10">
									<input type="text" class="form-control" id="teacherId" readonly="readonly" value="" name="teacherId" readonly="readonly">
								</div>
							</div>
							<div class="form-group row">
								<label for="articleTitle" class="col-sm-2 control-label">姓名</label>
								<div class="col-sm-10">
									<input type="text" class="form-control" id="teacherName" name="teacherName" readonly="readonly">
								</div>
							</div>
							<div class="form-group row">
								<label for="articleTitle" class="col-sm-2 control-label">简介</label>
								<div class="col-sm-10">
									<input type="text" class="form-control" id="teacherPreview" name="teacherPreview">
								</div>
							</div>
							<div class="form-group row">
								<label for="articleTitle" class="col-sm-2 control-label">照片</label>
								<div class="col-sm-10">
									<input type="text" class="form-control" id="teacherPic" name="teacherPic">
								</div>
							</div>
							<!--<div class="form-group row">
								<label for="articleTitle" class="col-sm-2 control-label">班级名称</label>
								<div class="col-sm-10">
									<input type="text" class="form-control" id="courseTitle" name="courseTitle">
								</div>
							</div>-->

						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-default" data-dismiss="modal">关闭 </button>
							<!-- data-dismiss="modal" 关闭模态框 -->
							<button type="button" class="btn btn-primary" id="update_button" data-dismiss="modal">提交更改 </button>
						</div>
					</form>
				</div>
				<!-- /.modal-content -->
			</div>
			<!-- /.modal -->
		</div>
		<div class="modal fade" id="courseListModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
						<h4 class="modal-title" id="myModalLabel">任教课程</h4>
					</div>
					<div class="modal-body">
						<ul class="nav nav-pills">

						</ul>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					</div>
				</div>
			</div>
		</div>
		<!-- JS -->

		<!-- jQuery -->
		<!--  jQuery Migrate Plugin -->
		<!--<script src="${pageContext.request.contextPath}/back/js/jquery-1.11.2.min.js"></script>-->
		<script type="text/javascript" src="../front/js/jquery-3.2.1.min.js"></script>

		<script src="../WebTools/Bootstrap3-3-7/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
		<!--<script src="../WebTools/Bootstrap-4.4.1/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>-->
		<!--<script src="../WebTools/Bootstrap-4.4.1/js/bootstrap.bundle.js" type="text/javascript" charset="utf-8"></script>-->
		<script src="${pageContext.request.contextPath}/back/js/layer/layer.js"></script>
		<script type="text/javascript">
			$(function() {
				if('${sessionScope.managerName}' == null || '${sessionScope.managerName}' == '') {
					location.href = "login.jsp";
				}
			})
			$(document).ready(function() {

				// 1
				sendAjax();

				// 删除
				$(document).on("click", ".delete", function() {
					layer.confirm("是否确定删除", {
						btn: ['确定', '取消']
					}, function() {
						$.ajax({
							async: true,
							url: "${pageContext.request.contextPath}/TeacherServlet",
							type: "POST",
							data: {
								"op": "deleteByTeacherId",
								"teacherKey": $("#kw").val(),
								"teacher_id": $(this).data("teacher_id")
							},
							dataType: "json",
							success: function(result, status, xhr) {
								layer.msg("删除成功", {
									icon: 1,
									time: 1000
								});
								// 调用数据渲染的方法
								showData(result);
							},
							error: function(xhr, status, error) {
								layer.msg("刪除异步请求失败!");
							}
						});
					});
				});
				//  模鈦框
				$(document).on("click", ".open_update_modal", function() {
					$('#updateModal').modal();
					var teacher_id = $(this).data("teacher_id");
					var teacher_name = $(this).data("teacher_name");
					var teacher_preview = $(this).data("teacher_preview");
					var teacher_pic = $(this).data("teacher.teacher_pic");
					var course_title = $(this).data("course_title");
					//					console.log($(this).data("teacher.teacher_pic"));
					if($(this).data("teacher.teacher_pic") == 'undefined') {
						teacher_pic = '';
					}
					$("#updateModal #teacherId").val(teacher_id);
					$("#updateModal #teacherName").val(teacher_name);
					$("#updateModal #teacherPreview").val(teacher_preview);
					$("#updateModal #teacherPic").val(teacher_pic);
					//					$("#updateModal #courseTitle").val(course_title);

				});

				// 修改
				$(document).on("click", "#update_button", function() {

					var updateTeacher = {
						teacher_id: $("#updateModal #teacherId").val(),
						teacher_preview: $("#updateModal #teacherPreview").val(),
						teacher_pic: $("#updateModal #teacherPic").val()
					}
					$.ajax({
						async: true,
						url: "${pageContext.request.contextPath}/TeacherServlet",
						type: "POST",
						data: {
							op: "updateByTeacherId",
							teacherKey: $("#kw").val(),
							updateTeacher: JSON.stringify(updateTeacher)
						},
						dataType: "json",
						success: function(result, status, xhr) {
							layer.msg("修改成功", {
								icon: 1,
								time: 1000
							});
							//调用数据渲染方法
							showData(result);
						},
						error: function(xhr, status, error) {
							layer.msg("修改异步请求失败！");

						}
					});

				});
			});

			function viewCourseList(obj) {
				$('#courseListModal ul').empty();
				var x = '';
				$.each($(obj).data('course-list'), function() {
					x += '<li role="presentation" class="active"><a target="_blank" href="${pageContext.request.contextPath}/CourseServletForyd?op=toSingleCoursePage&courseId=' + this.course_id + '">' + this.course_title + '</a></li>';
				});
				$('#courseListModal ul').append(x);

			}

			// 2.搜索
			function search() {
				sendAjax();
			}
			// 清除搜索
			function clearSearch() {
				$("#kw").val("");
			}
			//发送异步请求
			function sendAjax() {
				$.ajax({
					async: true,
					url: "${pageContext.request.contextPath}/TeacherServlet",
					type: "GET",
					data: {
						op: "getTeacherList",
						teacherKey: $("#kw").val()
					},
					dataType: "json",
					success: function(result, status, xhr) {
						//调用数据渲染方法
						showData(result);

					},
					error: function(xhr, status, error) {
						layer.msg("發送异步请求失败！");

					}
				});

			}

			function showData(result) {
				//清空表格原始数据
				//				console.log(result)

				$("#DataTables_TeacherList tbody").empty();
				//渲染表格中的数据
				$.each(result, function() {
					var picContent = '<img src="${pageContext.request.contextPath}/FileDownLoadServlet?op=getAccountFace&faceName=' + this.teacher_pic + '" alt="' + this.teacher_name + '" class="img-fluid" style="width:40px">';
					if(this.teacher_pic == null || this.teacher_pic.trim() == '') {
						picContent = '暂无头像';
					}
					var previewContent = '暂无简介';

					if(this.teacher_preview != null && this.teacher_preview.trim() != '') {
						previewContent = this.teacher_preview;
					}
					$("#DataTables_TeacherList tbody").append("<tr>" +
						"<td>" + this.teacher_id + "</td>" +
						"<td>" + this.teacher_name + "</td>" +
						"<td>" + previewContent + "</td>" +
						"<td>" + picContent + "</td>" +
						"<td><button class='btn btn-info' data-course-list='" + JSON.stringify(this.list) + "' data-toggle='modal' data-target='#courseListModal' onclick='viewCourseList(this)'>查看</button></td>" +
						"<td><a href=\"#\" data-toggle=\"modal\" data-target=\"#updateModal\" class=\"open_update_modal\"" +
						"data-teacher_id= \"" + this.teacher_id + "\"" +
						"data-teacher_name=\"" + this.teacher_name + "\"" +
						"data-teacher_preview=\"" + this.teacher_preview + "\"" +
						"data-teacher.teacher_pic=\"" + this.teacher_pic + "\"" +
						"data-course_title=\"" + this.course_title + "\">" +
						"<i class=\"icon-edit\"></i>修改</a>&nbsp;&nbsp;" +

						" <a href=\"#\" class=\"delete\" data-teacher_id=\"" + this.teacher_id + "\"><i class=\"icon-remove\"></i>删除</a>" +
						"</td>" +
						"</tr> ");
				});
			}
		</script>
	</body>

</html>